{% extends 'base.html' %}
{% from "_formhelpers.html" import render_field %}

{% block title %}Wunjo{% endblock %}

{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/awesomplete.min.css') }}">
<script src="{{ url_for('static', filename='basic/js/awesomplete.min.js') }}"></script>
{% endblock %}

{% block body %}
<template class="modal-preload-nocuda-win32-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40 h-screen">
            <div class="flex flex-col p-5 rounded-[.625rem] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-full max-w-sm transition-all max-h-full bg-dark-pop-up">
                <h2 class="text-[1.25rem] leading-6 tracking-[0.0125rem] font-extra-thick font-alumni h2-alumni">{{ _('Attention') }}!</h2>
                <p class="mt-3 flex gap-2.5 text-m-mobile md:tex-m p-2.5 bg-danger-primary bg-opacity-30 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg>
                    <span><b>{{ _('IMPORTANT') }}:</b> {{ _('The CUDA driver is not detected. If you proceed with the installation, the program will run on the CPU, resulting in') }} <b>{{ _('significantly slower performance') }}</b> {{ _('for some functions, and others may not work at all. To enable GPU acceleration,') }} <b>{{ _('please install') }}</b> {{ _('the necessary') }} <b>Nvidia CUDA</b> {{ _('drivers and restart Wunjo.') }}</span>
                </p>
                <div class="load hidden flex flex-col gap-3 mt-3">
                    <div class="flex items-center gap-2 p-2.5 relative w-full h-10 bg-dark-elements rounded-[.625rem] overflow-hidden">
                        <div class="absolute w-full h-full left-0 top-0 bg-gradient-to-r from-[rgba(255,237,210,0.20)] to-accent-primary opacity-10" style="background: linear-gradient(to right, rgba(255, 237, 210, 0.2), rgb(255, 237, 210));"></div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="animate-loadingRing mx-auto stroke-accent-primary"><path d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        <p style="text-wrap: nowrap;" class="text-m-mobile md:text-m grow">{{ _('Loading') }}...</p>
                        <div class="absolute h-full w-full left-0 top-0 animate-loadingStripe" style="background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 16px, rgba(0, 0, 0, 0.08) 16px, rgba(0, 0, 0, 0.08) 32px) 0% 0% / 200% 200%;"></div>
                    </div>
                </div>
                <div class="flex items-center justify-center gap-2">
                    <button style="text-wrap: nowrap;" onclick="startPreload(false);this.closest('.modal-root').remove();" class="overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 bg-light-emphasis hover:bg-dark-elements-hover text-light-primary bg-dark-elements">
                        <span>{{ _('Anyway install') }}</span>
                    </button>
                    <a target="_blank" rel="noopener noreferrer" href="https://developer.nvidia.com/cuda-12-6-0-download-archive" style="text-wrap: nowrap;" class="overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 hover:bg-accent-hover text-dark-background bg-accent-primary">
                        CUDA 12.6
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<template class="modal-preload-win32-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40 h-screen">
            <div class="flex flex-col p-5 rounded-[.625rem] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-full max-w-sm transition-all max-h-full bg-dark-pop-up">
                <h2 class="text-[1.25rem] leading-6 tracking-[0.0125rem] font-extra-thick font-alumni h2-alumni">{{ _('Welcome') }}!</h2>
                <p class="message mt-3 text-m-mobile lg:text-m">{{ _('Welcome to Wunjo! To get started, essential drivers will need to be installed. Click') }} <text class="text-accent-primary">{{ _('Installation') }}</text> {{ _('to proceed.') }}</p>
                <p class="hidden modal-message mt-3 flex gap-2.5 text-m-mobile md:tex-m p-2.5 bg-dark-background bg-opacity-30 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg>
                    <span></span>
                </p>
                <p class="hidden system-message mt-3 flex gap-2.5 text-m-mobile md:tex-m p-2.5 bg-dark-background bg-opacity-30 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg>
                    <span></span>
                </p>
                <div class="load hidden flex flex-col gap-3 mt-3">
                    <div class="flex items-center gap-2 p-2.5 relative w-full h-10 bg-dark-elements rounded-[.625rem] overflow-hidden">
                        <div class="absolute w-full h-full left-0 top-0 bg-gradient-to-r from-[rgba(255,237,210,0.20)] to-accent-primary opacity-10" style="background: linear-gradient(to right, rgba(255, 237, 210, 0.2), rgb(255, 237, 210));"></div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="animate-loadingRing mx-auto stroke-accent-primary"><path d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        <p style="text-wrap: nowrap;" class="text-m-mobile md:text-m grow">{{ _('Loading') }}...</p>
                        <div class="absolute h-full w-full left-0 top-0 animate-loadingStripe" style="background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 16px, rgba(0, 0, 0, 0.08) 16px, rgba(0, 0, 0, 0.08) 32px) 0% 0% / 200% 200%;"></div>
                    </div>
                </div>
                <button id="hidden-btn" style="text-wrap: nowrap;" onclick="startPreload();" class="hidden overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 hover:bg-accent-hover text-dark-background bg-accent-primary"></button>
                <div id="driver-div" class="flex items-center justify-center gap-2">
                    <button style="text-wrap: nowrap;" onclick="startPreload();" class="overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 hover:bg-accent-hover text-dark-background bg-accent-primary">
                        <span>{{ _('Installation') }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<template class="modal-preload-linux-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40 h-screen">
            <div class="flex flex-col p-5 rounded-[.625rem] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-full max-w-sm transition-all max-h-full bg-dark-pop-up">
                <h2 class="text-[1.25rem] leading-6 tracking-[0.0125rem] font-extra-thick font-alumni h2-alumni">{{ _('Attention') }}!</h2>
                <p class="message mt-3 text-m-mobile lg:text-m">{{ _('It appears that you have CUDA installed, but it’s an outdated version. Please update CUDA to version 12.4 or higher and install cuDNN 9.x to take advantage of GPU acceleration.') }}</p>
                <div class="load hidden flex flex-col gap-3 mt-3">
                    <div class="flex items-center gap-2 p-2.5 relative w-full h-10 bg-dark-elements rounded-[.625rem] overflow-hidden">
                        <div class="absolute w-full h-full left-0 top-0 bg-gradient-to-r from-[rgba(255,237,210,0.20)] to-accent-primary opacity-10" style="background: linear-gradient(to right, rgba(255, 237, 210, 0.2), rgb(255, 237, 210));"></div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="animate-loadingRing mx-auto stroke-accent-primary"><path d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        <p style="text-wrap: nowrap;" class="text-m-mobile md:text-m grow">{{ _('Loading') }}...</p>
                        <div class="absolute h-full w-full left-0 top-0 animate-loadingStripe" style="background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 16px, rgba(0, 0, 0, 0.08) 16px, rgba(0, 0, 0, 0.08) 32px) 0% 0% / 200% 200%;"></div>
                    </div>
                </div>
                <div class="flex items-center justify-center gap-2">
                    <a target="_blank" rel="noopener noreferrer" href="https://developer.nvidia.com/cudnn-9-5-1-download-archive" style="text-wrap: nowrap;" class="overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 hover:bg-accent-hover text-dark-background bg-accent-primary">
                        cuDNN 9.x
                    </a>
                    <a target="_blank" rel="noopener noreferrer" href="https://developer.nvidia.com/cuda-12-6-0-download-archive" style="text-wrap: nowrap;" class="overflow-hidden rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 h-max self-center !pr-3 w-full mt-5 hover:bg-accent-hover text-dark-background bg-accent-primary">
                        CUDA 12.6
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<body class="bg-dark-background min-h-screen font-sans text-regular-mobile lg:text-regular lg:w-[calc(100%-var(--scrollbar-thickness)] pt-[var(--navbar-top-mobile)] md:pt-[var(--navbar-top)] transition-[padding-top]">
    <div style="z-index:99999" class="ml-3 invert-on-touchscreen absolute top-2 left-2 font-normal gap-0 flex items-center justify-center">
        <input style="color: #ffffff;background: #221d21" class="w-24 translation-input text-center disabled:cursor-not-allowed rounded-lg transition-colors px-3 py-2.5 !font-bold text-m-mobile lg:text-m uppercase" value="{% if get_locale() == 'ru' %}Русский{% elif get_locale() == 'zh' %}中文{% elif get_locale() == 'ko' %}한국어{% elif get_locale() == 'es' %}Español{% else %}English{% endif %}">
    </div>
    <main class="flex items-center">
        <div class="flex-1 flex max-lg:flex-col-reverse w-full lg:h-screen">
            <div class="hidden-on-touchscreen flex flex-col items-center gap-8 basis-7/12 lg:h-full px-6 lg:px-14 xl:px-16 py-14 bg-accent-primary justify-center">
                <div class="flex flex-col flex-1"></div>
                <div class="flex flex-col flex-1 justify-center gap-8 items-center">
                    <a>
                        <div class="cursor-pointer px-1.5 font-extrabold font-alumni text-black text-heading-1-mobile lg:text-heading-1">Wunjo</div>
                    </a>
                    <div class="relative">
                        <video style="box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;" class="rounded-[10px] w-auto max-h-[360px] h-auto object-cover" autoplay="" loop="" muted="" poster="" playsinline=""></video>
                    </div>
                    <p class="text-subtitle-mobile lg:text-subtitle text-center mx-auto text-dark-background">{{ _('New features alert! Soon!') }}</p>
                </div>
                <div class="flex flex-col justify-end flex-1">
                    <p class="text-s-mobile lg:text-s text-center mx-auto text-dark-background mt-auto">{{ _('To learn more project, check out') }} <!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/playlist?list=PLJG0sD6007zFJyV78mkU-KW2UxbirgTGr">{{ _('YouTube channel') }}</a>.
                        <br>{{ _('We’re') }}<!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://boosty.to/wunjo">{{ _('looking') }}</a> <!-- -->
                        {{ _('for different support!') }}
                    </p>
                </div>
            </div>
            <div class="min-h-screen flex flex-col justify-start items-center max-lg:justify-center xl:px-20 lg:px-14 py-6 lg:py-8 max-lg:px-4 flex-1">
                <div class="flex flex-col flex-1"></div>
                <div class="fixed top-0 left-0 right-0 bottom-0 view-dark-background opacity-[.85]" style="z-index:-1;"></div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start max-lg:py-32">
                    <div class="flex-1 flex flex-col w-full justify-center gap-7 max-w-xs text-white">
                        <input type="hidden" name="$ACTION_ID_">
                        <div class="flex flex-col gap-2.5">
                            <h1 class="text-heading-1-mobile lg:text-heading-1 uppercase text-accent-primary !font-[1000] font-alumni">{{ _('Ready to use Wunjo v2?') }}</h1>
                            <p class="text-subtitle-mobile lg:text-subtitle">{{ _('Not found large packages') }}</p>
                        </div>
                        <div class="flex flex-col gap-5">
                            <button class="rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 flex items-center justify-center gap-2 !bg-white hover:!bg-accent-hover hover:bg-accent-hover text-dark-background bg-accent-primary">
                                <svg fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.986 9.74a3.193 3.193 0 0 0-.008-.088A5.003 5.003 0 0 0 17 5H7a4.97 4.97 0 0 0-4.987 4.737c-.01.079-.013.161-.013.253v6.51c0 .925.373 1.828 1.022 2.476A3.524 3.524 0 0 0 5.5 20c1.8 0 2.504-1 3.5-3 .146-.292.992-2 3-2 1.996 0 2.853 1.707 3 2 1.004 2 1.7 3 3.5 3 .925 0 1.828-.373 2.476-1.022A3.524 3.524 0 0 0 22 16.5V10c0-.095-.004-.18-.014-.26zM7 12.031a2 2 0 1 1-.001-3.999A2 2 0 0 1 7 12.031zm10-5a1 1 0 1 1 0 2 1 1 0 1 1 0-2zm-2 4a1 1 0 1 1 0-2 1 1 0 1 1 0 2zm2 2a1 1 0 1 1 0-2 1 1 0 1 1 0 2zm2-2a1 1 0 1 1 0-2 1 1 0 1 1 0 2z"></path></svg>
                                <span class="text-dark-background text-m-mobile lg:text-m font-extra-thick">{{ _('Preload') }}</span>
                            </button>
                        </div>
                        <p class="text-s text-light-secondary">{{ _('By signing in, you are agreeing to the') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/eula">{{ _('End-User License Agreement') }}</a>
                            <!-- -->{{ _('and') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/privacy-policy">{{ _('Privacy Policy') }}</a>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start">
                    <div class="flex items-center gap-5 text-s-mobile lg:text-s text-light-secondary font-light mt-auto">
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://github.com/wladradchenko">GitHub</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://t.me/wladblog">Telegram</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://wladradchenko.ru">{{ _('Author') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        const host = {{ host|tojson|safe }};
        const platform = {{ platform|tojson|safe }};
        const nvccVersion = {{ nvcc_version|tojson|safe }};
        const onnxruntimeBool  = {{ onnxruntime_bool|tojson|safe }};
        const isAdminBool = {{ is_admin|tojson|safe }};

        function openPreloadModal() {
            // Modal
            const modalTemplate = document.querySelector(platform === 'win32' ? '.modal-preload-win32-template' : '.modal-preload-linux-template');
            // Create a copy of the modal content from the template
            const modalContent = modalTemplate.content.cloneNode(true);
            if (platform === 'win32'){
                // Get element for win32
                const systemMessage = modalContent.querySelector(".system-message");
                const systemMessageSpan = systemMessage.querySelector("span");
                // Update the message based on conditions
                if (isAdminBool !== true) {
                    systemMessageSpan.innerHTML = "<b>{{ _('IMPORTANT') }}:</b> {{ _('Make sure Wunjo has the necessary permissions for installation. If needed, try running it as') }} <b>{{ _('Administrator') }}</b>.";
                }
                if (isAdminBool !== true) {
                    // Show the system message
                    systemMessage.classList.remove('hidden');
                };
            };
            // Append the modal content to the document body
            document.body.appendChild(modalContent);
        }

        openPreloadModal();
    </script>

    <script>
        async function updateConsoleLog() {
            try {
                const response = await fetch("/console-log", {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json(); // Parse JSON data

                // Reverse the array elements
                const reversedData = data.reverse();
                // Remove empty lines and trim spaces
                const nonEmptyData = reversedData.filter(line => line.trim() !== "");
                // Get the first line of non-empty data
                const logText = nonEmptyData.length > 0 ? nonEmptyData[0] : ""; // Get the first line, or an empty string if there are no lines

                return logText; // Return the log text
            } catch (error) {
                console.error("Error fetching or processing console log:", error);
                throw error; // Rethrow the error to be caught by the caller
            }
        }

        // Function to update log textarea and handle loading state
        async function updateLogTextarea(elem) {
            try {
                const logText = await updateConsoleLog(); // Fetch the console log text asynchronously
                elem.textContent = logText || "{{ _('Loading') }}"; // Set element text content to logText (or "Loading" if logText is falsy)
            } catch (error) {
                console.error('Error updating log textarea:', error);
            }
        }

        function handleDownloadLogConsole() {
            updateConsoleLog()
                .then(logText => {
                    if (logText) {
                        const filename = 'console_log_' + new Date().toISOString() + '.log';
                        const blob = new Blob([logText], { type: 'text/plain' });

                        // Create a link element
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = filename;

                        // Append the link to the document body and click it programmatically
                        document.body.appendChild(link);
                        link.click();

                        // Clean up
                        document.body.removeChild(link);
                    }
                })
                .catch(error => {
                    console.error('Error downloading log:', error);
                });
            }
    </script>

    <script>
        async function exitApp(btn, loader) {
            try {
                const response = await fetch("/exit", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                });

                if (!response.ok) {
                    console.error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json(); // Parse JSON data
                console.log(data.status);
            } catch (error) {
                console.error("Error fetching or processing console log:", error);
            }
        }

        async function fetchLoading(loader) {
            // Get logical for onnxruntime import
            const modalMessage = document.querySelector('.modal-message');
            btn = document.querySelector('#hidden-btn');
            driverDiv = document.querySelector('#driver-div');
            driverDiv.classList.add('hidden');

            try {
                const response = await fetch("/preload", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                });

                if (!response.ok) {
                    console.error(`HTTP error! Status: ${response.status}`);
                    loader.classList.add('hidden');
                    btn.textContent = `HTTP error! Try again`;
                    btn.classList.remove('hidden', 'hover:bg-accent-hover', 'bg-accent-primary');
                    btn.classList.add('hover:bg-danger-hover', 'bg-danger-primary');
                    btn.addEventListener('click', () => {
                        handleDownloadLogConsole();
                    });
                }

                const data = await response.json(); // Parse JSON data
                if (data.status === 200) {
                    console.log('ok');
                    loader.classList.add('hidden');
                    btn.textContent = `{{ _('Great. You need to restart Wunjo') }}`;
                    btn.classList.remove('hidden');
                    btn.onclick = async function() {
                        exitApp();
                        // Close the current tab or window
                        window.close();
                    };
                } else if (data.status === 403) {
                    // Initial message
                    modalMessage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg><span>{{ _('Before you proceed, manually remove any previous versions of torch, torchaudio, and torchvision. First, close Wunjo software, delete those folders from') }} <button onclick="fetch('/open-app-packages').then(response => { if (response.ok) return response.json(); else throw new Error('Failed to open folder'); }).then(data => console.log(data)).catch(error => console.error('Error:', error));" type="button" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background">{{ _('software directory') }}</button> {{ _('and then run Wunjo with admin root privileges.') }}</span>`;
                    modalMessage.classList.remove('bg-dark-background', 'bg-accent-primary', 'hidden');
                    modalMessage.classList.add('bg-danger-primary')
                    // Logical
                    console.log('error');
                    loader.classList.add('hidden');
                    btn.textContent = `{{ _('Close') }}`;
                    btn.classList.remove('hidden', 'hover:bg-accent-hover', 'bg-accent-primary');
                    btn.classList.add('hover:bg-danger-hover', 'bg-danger-primary');
                    btn.onclick = async function() {
                        exitApp();
                        // Close the current tab or window
                        window.close();
                    };
                } else {
                    console.log('error');
                    loader.classList.add('hidden');
                    btn.textContent = `{{ _('Error. Not found permission') }}`;
                    btn.classList.remove('hidden', 'hover:bg-accent-hover', 'bg-accent-primary');
                    btn.classList.add('hover:bg-danger-hover', 'bg-danger-primary');
                    btn.onclick = async function() {
                        handleDownloadLogConsole();
                        this.classList.add('hidden');
                        driverDiv.classList.remove('hidden');
                    };
                };
            } catch (error) {
                console.error("Error fetching or processing console log:", error);
                btn.textContent = "{{ _('Error fetching. Try again') }}";
                btn.classList.remove('hidden', 'hover:bg-accent-hover', 'bg-accent-primary');
                btn.classList.add('hover:bg-danger-hover', 'bg-danger-primary');
                btn.onclick = async function() {
                    handleDownloadLogConsole();
                    this.classList.add('hidden');
                    driverDiv.classList.remove('hidden');
                };
            }
        }

        async function startPreload(nvccModal = true) {
            if (platform === 'win32') {
                // Get logical for onnxruntime import
                const modalMessage = document.querySelector('.modal-message');

                if (!nvccVersion && nvccModal) {
                    // Attention message
                    const modalTemplate = document.querySelector('.modal-preload-nocuda-win32-template');
                    // Create a copy of the modal content from the template
                    const modalContent = modalTemplate.content.cloneNode(true);
                    // Append the modal content to the document body
                    document.body.appendChild(modalContent);
                    return
                }

                if (onnxruntimeBool === true) {
                    modalMessage.classList.remove('bg-danger-primary', 'bg-accent-primary');
                    modalMessage.classList.add('bg-dark-background', 'hidden')
                    const loadElem = document.querySelector('.load');
                    loadElem.classList.remove('hidden');
                    // Get msg elem
                    const loadElemP = loadElem.querySelector('p');
                    // Update console log every 5 seconds
                    consoleBackendLogSetInterval = setInterval(() => {updateLogTextarea(loadElemP)}, 1000); // Async
                    // Assign the click event of btn to hiddenBtn
                    await fetchLoading(loadElem);
                    // Clear interval
                    clearInterval(consoleBackendLogSetInterval);
                } else {
                    // Install MS VS before
                    modalMessage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg><span>{{ _('Before you need to install') }} <a href="https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170" target="_blank" rel="noopener noreferrer" class="underline">Microsoft Visual C++ Redistributable</a> {{ _('from official website.') }}</span>`;
                    modalMessage.classList.remove('bg-dark-background', 'bg-accent-primary', 'hidden');
                    modalMessage.classList.add('bg-danger-primary')
                };
            } else {
                event.preventDefault(); // Prevent default anchor behavior
                window.open('https://developer.nvidia.com/cuda-12-6-2-download-archive', '_blank', 'noopener,noreferrer');
            };
        }

        function messageError(modalMessage, msg) {
            modalMessage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg><span>${msg}</span>`;
            modalMessage.classList.remove('bg-dark-background', 'bg-accent-primary');
            modalMessage.classList.add('bg-danger-primary')
        }

        function messageOk(modalMessage, msg) {
            modalMessage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg><span>${msg}</span>`;
            modalMessage.classList.remove('bg-dark-background', 'bg-danger-primary')
            modalMessage.classList.add('bg-accent-primary')
        }

        function messageBusy(modalMessage, msg) {
            modalMessage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg><span>${msg}</span>`;
            modalMessage.classList.remove('bg-danger-primary', 'bg-accent-primary')
            modalMessage.classList.add('bg-dark-background');
        }
    </script>

    <script src="{{ url_for('static', filename='basic/js/translation.min.js') }}" async></script>
    <script>
        window.addEventListener('load', function() {
            initTranslationInputLogical();
        });
    </script>
</body>
{% endblock %}
